<template>
    <!-- 注册 -->
    <el-dialog
    title="提示"
    v-model="dialogVisible"
    width="50%"
    :before-close="handleClose">
    <div v-show="demo">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div class="bord">
                <h1 class="h">注册</h1>
                <b>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model.number="ruleForm.age"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="resource">
                    <el-radio-group v-model="ruleForm.resource">
                      <el-radio label="男"></el-radio>
                      <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="ruleForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                
                <el-form-item class="big">
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                    <router-link to="personal" class="xian"><el-button @click="back">返回</el-button></router-link>
                </el-form-item>
              </b>
            </div>
        </el-form>
      </div>
    <!-- eslint-disable-next-line -->
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
import axios from 'axios';
    export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
              callback();
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        dialogVisible: true,
        ruleForm: {
            name: '',
            userName: '',
            pass: '',
            checkPass: '',
            age: '',
            resource: '',
        },
        rules: {
            name: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
                { min: 1, max: 10, message: '长度在 1 到 5 个字符', trigger: 'blur' }
            ],
            userName: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            pass: [
                { validator: validatePass, trigger: 'blur' }
            ],
            checkPass: [
            { validator: validatePass2, trigger: 'blur' }
            ],
            age: [
            { validator: checkAge, trigger: 'blur' }
            ]
        },
        // 是否展示
        demo : true,
        realuser:[]
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.get('/userAll').then(
            response =>{
              this.realuser = response.data
              for(let i=0;i<this.realuser.length;i++){
                if(this.realuser[i].userName == this.ruleForm.userName){
                  this.$notify.error({
                      title: '注册失败',
                      message: '用户名重复了',
                      type: 'success'
                  });
                  return 
                }else if(i == this.realuser.length - 1){
                  
                  axios.post('/insUser', {
                  name:this.ruleForm.name,
                  age:this.ruleForm.age,
                  sex:this.ruleForm.resource,
                  userName:this.ruleForm.userName,
                  password:this.ruleForm.checkPass
                }).then(
                  response=>{
                      console.log(response.data)
                      this.$notify({
                            title: '注册成功',
                            message: '操作成功',
                            type: 'success'
                        });
                  },
                  error=>{
                      console.log(error.message)
                  }
                  )
                }
              }
            },
            error =>{
              console.log(error.message)
            }
          )
            
          
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
  }
</script>

<style scoped>
    .demo-ruleForm{
        margin:auto;
        width:500px;
        height:500px;
        float:top;
    }
    .bord{
        margin:auto;
        position: relative;
        bottom:-30px;
        left:-30px;
        width:400px;
        float:top;
    }
    .h{
       font-family:Kaiti;
       font-size:30px;
       text-align: center;
       position: relative;
       right:-20px;
       float:top;
    }
    .back{
        width:5px;
        height:5px;
    }
    .xian{
    text-decoration:none;
    position: relative;
    right:-14px;
    top:-1px;
  }
</style>